<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form v-if="componentData.cid == COMPONENT_TYPES.group_component">
      <input-normal label="修改组件类型" v-model="componentData.cid"  @change="onChangeAttrType"></input-normal>
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <add-img-con :url="commonAttr.bgUrl" comAttr="commonAttr" picAttr="bgUrl" :height="100" :isDelete="true" class="margin-left-right-16"></add-img-con>
      <input-normal label="背景图片" v-model="commonAttr.bgUrl" @change="onChangeAttr"></input-normal>
      <input-normal label="距离顶部位置" v-model="conAttr.realTop" unit="Y" @change="onChangePosition"></input-normal>
      <input-normal label="另一个组件高度" v-model="conAttr.otherCompHeight" unit="Y" @change="onChangePosition"></input-normal>
      <switch-normal v-model="commonAttr.isDisplayY" label="显示Y轴滚动条" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isDisplayY" label="滚动条颜色" :valLists="SCROLLBER_TYPE" v-model="commonAttr.scrollbarType" @change="onChangeAttr"></dropdown-normal>
      <switch-normal v-model="commonAttr.isPercent" label="y轴百分比" @change="onChangeAttr"></switch-normal>
      <dropdown-normal label="脚本类名" :valLists="INJECT_GROUP_CLASS_NAMES" v-model="commonAttr.injectJsClass" @change="onChangeAttr"></dropdown-normal>
      <input-normal label="脚本类名" v-model="commonAttr.injectJsClass" placeholder="ClickGetCard" @change="onChangeAttr"></input-normal>
      <textarea-normal v-if="commonAttr.injectJsClass" label="脚本类参数" v-model="commonAttr.injectJsClassParams" :placeholder="getPlaceholder(commonAttr.injectJsClass)" @change="onChangeAttr"></textarea-normal>
    </el-form>
    <p v-else class="margin-left-right-16 margin-top-bottom-10">无UI属性配置，请在事件UI中设置</p>
  </right-template>
</template>


<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { COMPONENT_TYPES, PAGE_TYPE, INJECT_GROUP_CLASS_NAMES, SCROLLBER_TYPE } from '@/const/'
import { ComponentTypesDefaultDom  } from '@/store/models/component-default-data'
import { getPlaceholder } from '@/const/web/const-web-inject-palceholer'
import { useWebSiteStore } from '@/store/web/site'

const useWebComponent = useWebComponentStore()
const useWebSite = useWebSiteStore()
const state = reactive({
  isLong: useWebSite.attrs.pageType == PAGE_TYPE.long ? true : false,
})

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
let conAttr_: any
const conAttr = computed(() => {
  conAttr_ = useWebComponent.currentComponentData!.conAttr
  return conAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const onChangeAttrType = () => {
  let newobj: any
  if(componentData_.cid == COMPONENT_TYPES.group_component) {
    newobj = _.cloneDeep(ComponentTypesDefaultDom[COMPONENT_TYPES.group_component])
  } else {
    newobj = _.cloneDeep(ComponentTypesDefaultDom[COMPONENT_TYPES.group_carousel])
  }
  newobj.id = componentData_.id
  newobj.conAttr = componentData_.conAttr
  newobj.components = componentData_.components
  newobj.animate = componentData_.animate
  newobj.active = componentData_.active
  useWebComponent.replaceCurrentComponentData(newobj)
}
const onChangePosition = () => {
  const realTop = _.parseInt(conAttr_.realTop)
  const otherCompHeight = _.parseInt(conAttr_.otherCompHeight)
  useWebComponent.recordMousePosition({ otherCompHeight, realTop })
}
</script>